<script setup lang="ts">
  import { ComponentTypeRow } from '../../hooks/types'
  import { useTemplateForm } from '@/views/order/custom/hooks/useTemplate'

  const { addComponent } = useTemplateForm()

  defineOptions({
    name: 'OrderCustomFormComponentTypeList',
  })

  const emits = defineEmits<{
    (e: 'on-drag', value: ComponentTypeRow): void
    (e: 'on-drag-end', value: ComponentTypeRow): void
  }>()

  const componentTypeList: Array<ComponentTypeRow> = [
    { type: 'input', text: '单行输入' },
    { type: 'textarea', text: '多行输入' },
    { type: 'radio', text: '单选框' },
    { type: 'checkbox', text: '多选框' },
    { type: 'single-select', text: '下拉单选' },
    { type: 'multiple-select', text: '下拉多选' },
    { type: 'divider', text: '分隔线' },
    { type: 'date-time', text: '日期时间' },
    { type: 'file-upload', text: '文件上传' },
    { type: 'address', text: '地址选择' },
    { type: 'data-connect', text: '关联数据' },
    { type: 'child-form', text: '表格' },
  ]

  const handleDrag = (componentType: ComponentTypeRow) => {
    emits('on-drag', componentType)
  }

  const handleDragEnd = (componentType: ComponentTypeRow) => {
    emits('on-drag-end', componentType)
  }

  const handleComponetTypeClick = (componentType: ComponentTypeRow) => {
    addComponent(componentType.type)
  }
</script>

<template>
  <div class="order-custom-form-component-type-list">
    <div class="container">
      <div
        v-for="componentType in componentTypeList"
        :key="componentType.type"
        class="component-type-item"
        draggable="true"
        @drag="(e: Event) => handleDrag(componentType)"
        @dragend="(e: Event) => handleDragEnd(componentType)"
        @click="handleComponetTypeClick(componentType)"
      >
        <i :class="`iconfont icon-custom-${componentType.type}`"></i>
        {{ componentType.text }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-component-type-list {
    width: 200px;
    height: fit-content;

    .container {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 12px;

      .component-type-item {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid #eee;
        border-radius: 4px;
        cursor: pointer;
        box-sizing: border-box;
        padding: 0 12px;
        column-gap: 6px;

        &:hover {
          border: 1px dotted #007cff;
          color: #007cff;
        }

        .iconfont {
          font-size: 14px;
        }
      }
    }
  }
</style>
